<template>
  <!-- <view class="page-main">
	  <view class="body-main">
	    <myhousingCard :item="item"/>
	    
	  </view>
	</view>
	
	</view> -->
  <view class="page-main">
    <view class="body-main" v-show="page == 1">
      <view class="form-main">
        <view class="part1" style="padding: 0;">
          <view class="title">基础信息</view>
          <!--		2倍高度 表单行 START		-->

          <view class="row">
            <view class="row-name-left">所属盘源</view>
            <view class="right-part">
              <scroll-view scroll-x="true" class="uni-input ">{{this.item.build&&this.item.build.title}}</scroll-view>
            </view>
          </view>
          <!--		2倍高度 表单行 END		-->

          <view class="row">
            <view class="row-name-left">房源标题</view>
            <view class="right-part">
              <scroll-view scroll-x="true" class="uni-input ">{{this.item.title}}</scroll-view>
            </view>
          </view>
          <view class="row">
            <view class="row-name-left">坐落</view>
            <view class="right-part">
              <view class="uni-input-wrapper">
                <scroll-view scroll-x="true" class="uni-input ">{{this.item.is_located}}</scroll-view>
              </view>
            </view>
          </view>
          <view class="row">
            <view class="row-name-left">配套设置</view>
            <view class="right-part">
              <view class="uni-input-wrapper">
                <scroll-view scroll-x="true" class="uni-input ">{{this.item.mating_set}}</scroll-view>
              </view>
            </view>
          </view>

          <view class="row">
            <view class="row-name-left">房源类型</view>
            <view class="right-part">
              <scroll-view scroll-x="true" class="uni-input ">{{house_sell_typelist[this.item.house_sell_type-1].name}}</scroll-view>
            </view>
          </view>
          <view class="row">
            <view class="row-name-left">楼层类型</view>
            <view class="right-part">
              <scroll-view scroll-x="true" class="uni-input ">{{this.item.house_floor_type}}</scroll-view>
            </view>
          </view>
          <view class="row">
            <view class="row-name-left">装修类型</view>
            <view class="right-part">
              <scroll-view scroll-x="true" class="uni-input ">{{this.item.house_renovation}}</scroll-view>
            </view>
          </view>
          <view class="row">
            <view class="row-name-left">房型</view>
            <view class="right-part">
              <scroll-view scroll-x="true" class="uni-input ">{{this.item.room_hall}}</scroll-view>
            </view>
          </view>
          <view class="row">
            <view class="row-name-left">面积</view>
            <view class="right-part">
              <scroll-view scroll-x="true" class="uni-input ">{{this.item.house_area}}</scroll-view>
            </view>
          </view>
          <view class="row" v-if="item.house_sell_type!=2&&item.house_sell_type!=5&&item.house_sell_type!=9">
            <view class="row-name-left">租金单价</view>
            <view class="right-part">
              <scroll-view scroll-x="true" class="uni-input ">{{this.item.house_price}}</scroll-view>
            </view>
          </view>
          <view class="row" v-if="item.house_sell_type!=2&&item.house_sell_type!=5&&item.house_sell_type!=9">
            <view class="row-name-left">租赁方式</view>
            <view class="right-part">
              <scroll-view scroll-x="true" class="uni-input ">{{this.item.lease_way}}</scroll-view>
            </view>
          </view>
          <view class="row" v-if="item.house_sell_type!=2&&item.house_sell_type!=5&&item.house_sell_type!=9">
            <view class="row-name-left">付款方式</view>
            <view class="right-part">
              <scroll-view scroll-x="true" class="uni-input ">{{this.item.payment_method}}</scroll-view>
            </view>
          </view>
          <view class="row" v-if="item.house_sell_type!=1&&item.house_sell_type!=4&&item.house_sell_type!=8">
            <view class="row-name-left">房源售卖单价</view>
            <view class="right-part">
              <scroll-view scroll-x="true" class="uni-input ">{{this.item.house_sell_price_m}}</scroll-view>
            </view>
          </view>
          <view class="row">
            <view class="row-name-left">所在楼层</view>
            <view class="right-part">
              <scroll-view scroll-x="true" class="uni-input ">{{this.item.house_floor}}</scroll-view>
            </view>
          </view>
          <view class="row">
            <view class="row-name-left">房号</view>
            <view class="right-part">
              <scroll-view scroll-x="true" class="uni-input ">{{this.item.house_number}}</scroll-view>
            </view>
          </view>
          <view class="row">
            <view class="row-name-left">用途</view>
            <view class="right-part">
              <scroll-view scroll-x="true" class="uni-input ">{{this.item.house_purpose}}</scroll-view>
            </view>
          </view>
          <view class="row">
            <view class="row-name-left">朝向</view>
            <view class="right-part">
              <scroll-view scroll-x="true" class="uni-input ">{{this.item.house_direction}}</scroll-view>
            </view>
          </view>
          <view class="row">
            <view class="row-name-left">委托信息(日期)</view>
            <view class="right-part">
              <scroll-view scroll-x="true" class="uni-input ">{{this.item.house_entrust}}</scroll-view>
            </view>
          </view>
          <view class="row">
            <view class="row-name-left">可容纳员工数</view>
            <view class="right-part">
              <scroll-view scroll-x="true" class="uni-input ">{{this.item.employee_capacity}}</scroll-view>
            </view>
          </view>
          <view class="row">
            <view class="row-name-left">业主来源</view>
            <view class="right-part">
              <scroll-view scroll-x="true" class="uni-input ">{{getowner(this.item.owner_source)}}</scroll-view>
            </view>
          </view>
          <view class="" style="border: 2rpx solid #ccc;padding: 20rpx;margin-top: 20rpx;" v-if="item.owner.length!=0">
            <view class="ownercard" style="margin-top: 40rpx;" v-for="(items,i) in item.owner" :key="i" >
              <view class="delowner" @tap="delowner(i)"></view>
              <text style="margin-left: 30rpx;">业主{{i+1}}</text>
                <view class="row">
                  <view class="row-name-left">姓名</view>
                  <view class="right-part">
                    <view class="uni-input-wrapper">
                      <scroll-view scroll-x="true" class="uni-input ">{{items.owner_name}}</scroll-view>
                    </view>
                  </view>
                </view>
                <view class="row">
                   <view class="row-name-left">联系方式</view>
                   <view class="right-part" style="width: ;">
                     <view class="uni-input-wrapper">
                       <scroll-view scroll-x="true" class="uni-input ">{{items.owner_phone}}</scroll-view>
                     </view>
                   </view>
                </view>
                  <view class="row">
                    <view class="row-name-left">微信</view>
                    <view class="right-part">
                      <view class="uni-input-wrapper">
                        <scroll-view scroll-x="true" class="uni-input ">{{items.wechat}}</scroll-view>
                      </view>
                    </view>
                  </view>
                  <view class="row">
                     <view class="row-name-left">微博</view>
                     <view class="right-part">
                       <view class="uni-input-wrapper">
                         <scroll-view scroll-x="true" class="uni-input ">{{items.weibo}}</scroll-view>
                       </view>
                     </view>
                  </view>
                   <view class="row">
                      <view class="row-name-left">QQ</view>
                      <view class="right-part">
                        <view class="uni-input-wrapper">
                          <scroll-view scroll-x="true" class="uni-input ">{{items.qq}}</scroll-view>
                        </view>
                      </view>
                    </view>
                    <view class="row">
                       <view class="row-name-left">地域</view>
                       <view class="right-part">
                         <view class="uni-input-wrapper">
                           <scroll-view scroll-x="true" class="uni-input ">{{items.regional}}</scroll-view>
                         </view>
                       </view>
                     </view>
                     <view class="row">
                        <view class="row-name-left">身份证</view>
                        <view class="right-part">
                          <view class="uni-input-wrapper">
                            <scroll-view scroll-x="true" class="uni-input ">{{items.id_number}}</scroll-view>
                          </view>
                        </view>
                      </view>
                      <view class="row">
                         <view class="row-name-left">邮箱</view>
                         <view class="right-part">
                           <view class="uni-input-wrapper">
                             <scroll-view scroll-x="true" class="uni-input ">{{items.email}}</scroll-view>
                           </view>
                         </view>
                       </view>
                       <view class="row">
                          <view class="row-name-left">地址</view>
                          <view class="right-part">
                            <view class="uni-input-wrapper">
                              <scroll-view scroll-x="true" class="uni-input ">{{items.address}}</scroll-view>
                            </view>
                          </view>
                        </view>
            </view>
            
          </view>
        </view>
      </view>
      <button class="blue-wide-button" style="margin-top: 10px;" @tap="next">下一页</button>
    </view>

  


  <view class="body-main" v-show="page ==2">
    <view class="form-main">
      <view class="part2">
        <view class="title">图片信息</view>
        <view class="part2-title" style="font-weight: normal;margin-top:68rpx;">房源缩略照片（1张）</view>
          <view class="imglist">
            <view class="" v-for="(items,i) in item.house_thumb" :key="i" @tap="bigimg(item.house_thumb,i)">
              <image class="pre-item-image" :src="items" mode="aspectFill"></image>
            </view>
          </view>
        <!--					上传图片-->
        
          <view class="part2-title" style="font-weight: normal;margin-top:68rpx;">房源轮播图照片（1-12张）</view>
          <view class="imglist">
            <view class="" v-for="(items,i) in item.house_banner" :key="i" @tap="bigimg(item.house_banner,i)">
              <image class="pre-item-image" :src="items" mode="aspectFill" ></image>
            </view>
          </view>
        <!--					上传图片-->
        
          <view class="part2-title" style="font-weight: normal;margin-top:68rpx;">房源结构设计图照片（1-12张）</view>
          <view class="imglist">
            <view class="" v-for="(items,i) in item.design_img" :key="i" @tap="bigimg(item.design_img,i)">
              <image class="pre-item-image" :src="items" mode="aspectFill"></image>
            </view>
          </view>
        
        <button class="blue-wide-button" style="margin-top: 10px;" @tap="last">上一页</button>
        <button class="blue-wide-button" style="margin-top: 10px;" @tap="next">下一页</button>
      </view>
    </view>

  </view>
  <view class="body-main" v-show="page ==3">
    <view class="form-main">
      <view class="part2">
        <view class="title">推荐理由</view>
        <view class="part2-title"><text style="font-size: 12px;color:#969799;font-weight: none;">(提炼2-3个点，输入字数不要超过140字)</text></view>
        <view class="part2-desc" style="width:300px">房源标签用英文逗号进行分割(字数为5个以内的4个标签)</view>
        <view class="row">
          <view class="row-name-left">1、房源标签：</view>
          <view class="right-part">
            <view class="uni-input-wrapper">
              <scroll-view scroll-x="true" class="uni-input ">{{this.item.sell_label}}</scroll-view>
            </view>
          </view>
        </view>
        <view class="row">
          <view class="row-name-left">2、房源亮点：</view>
          <view class="right-part">
            <view class="uni-input-wrapper">
              <scroll-view scroll-x="true" class="uni-input ">{{this.item.sell_point}}</scroll-view>
            </view>
          </view>
        </view>
        <view class="row">
          <view class="row-name-left">3、大厦介绍：</view>
          <view class="right-part">
            <view class="uni-input-wrapper">
              <scroll-view scroll-x="true" class="uni-input ">{{this.item.sell_building}}</scroll-view>
            </view>
          </view>
        </view>
        <view class="row">
          <view class="row-name-left">4、交通配套：</view>
          <view class="right-part">
            <view class="uni-input-wrapper">
              <scroll-view scroll-x="true" class="uni-input ">{{this.item.sell_traffic}}</scroll-view>
            </view>
          </view>
        </view>
        <view class="row">
          <view class="row-name-left">5、物业介绍：</view>
          <view class="right-part">
            <view class="uni-input-wrapper">
              <scroll-view scroll-x="true" class="uni-input ">{{this.item.sell_property}}</scroll-view>
            </view>
          </view>
        </view>
        <view class="row">
          <view class="row-name-left">6、周边配套： </view>
          <view class="right-part">
            <view class="uni-input-wrapper">
              <scroll-view scroll-x="true" class="uni-input ">{{this.item.sell_around}}</scroll-view>
            </view>
          </view>
        </view>
        <view class="row" style="border-bottom: none;">
          <view class="row-name-left">7、布局装修：</view>
          <view class="right-part">
            <view class="uni-input-wrapper">
              <scroll-view scroll-x="true" class="uni-input ">{{this.item.sell_layout}}</scroll-view>
            </view>
          </view>
        </view>
        <button class="blue-wide-button" style="margin-top: 10px;" @tap="last">上一页</button>
        <button class="blue-wide-button" style="margin-top: 10px;" @tap="next">下一页</button>
      </view>
    </view>

  </view>
  <view class="body-main" v-show="page ==4">
    <view class="form-main">
      <view class="part2">
        <view class="title">备注描述</view>
      </view>
      <textarea placeholder-style="color: #9f69799;" disabled style="width:582rpx;margin-top: 20rpx;padding:20rpx;border: 2rpx solid #eaeaea;"  v-html="item.remark"/>
      <button class="blue-wide-button" style="margin-top: 10px;" @tap="last">上一页</button>
      <button v-if="item.house_status==1&&(item.house_sell_type==1||item.house_sell_type==2||item.house_sell_type==3)" v-show="house_status" class="blue-wide-button" style="margin-top: 10px;" @tap="user_house_check">提交审核</button>
      
    </view>

  </view>
  </view>
</template>

<script>
  import myhousingCard from "@/components/myhousing_card.vue"
  export default {
    data() {
      return {
        item: {},
        page: 1,
        house_status:true,
        house_sell_typelist: [{
          value: 1,
          name: '租'
        }, {
          value: 2,
          name: '售'
        }, {
          value: 3,
          name: '租售'
        }, {
          value: 4,
          name: '已租'
        }, {
          value: 5,
          name: '已售'
        }, {
          value: 6,
          name: '资料房'
        }, {
          value: 7,
          name: '暂停房'
        }, {
          value: 8,
          name: '司租'
        }, {
          value: 9,
          name: '司售'
        }],
      };
    },
    onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
      
      //console.log(option.item.title); //打印出上个页面传递的参数。
      this.item = JSON.parse(option.item)
      console.log('1',this.item); //打印出上个页面传递的参数。
    },
    components: {
      myhousingCard
    },
    methods: {
      getowner(val){
        if(val==1){
          return '上门放盘'
        }else if(val==2){
          return '接收委托'
        }else{
          return '平台进线'
        }
      },
      user_house_check(){
        uni.request({
          url: `${this.$http}/api/merchant/user_house_check`,
          method: 'POST',
          header: {
            Authorization: 'Bearer ' + this.$store.state.token
          },
          data:{
            house_id:this.item.id
          },
          success:res=>{
            uni.showToast({
              title: res.data.msg,
              position: 'top',
              icon: 'none',
              duration: 2000
            });
            if(res.data.code==200){
              this.house_status = false
            }else if(res.data.code == 402 || res.data.code == 506){
                setTimeout(()=>{
                  this.$logout(res.data.msg);
                },1500)
              }
          },
        })
        
      },
      last() {
        this.page--;
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 300
        });
      },
      next() {
        this.page++;
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 300
        });
      },
      bigimg(list,index){
        console.log(list)
        uni.previewImage({
          urls: list,
          current:index,
          complete:(res)=>{
            console.log(res)
          }
        });
      }
    },
  }
</script>

<style scoped lang="scss">
  @import "../../assets/styles/global";
  @import "../../uview-ui/index.scss";
  .ownercard{
    position: relative;
    .row{
      width: 79vw !important;
    }
  }
  .imglist{
    display: flex;
    flex-wrap: wrap;
    
    view{
      
      margin: 10rpx;
      image{
        border: 1px solid #ebecee;
        border-radius: 10rpx;
        width: 160rpx;
        height: 160rpx;
      }
    }
  }
  .page-main {
    min-height: 100vh;
    background-color: $greyBackgroundColor;
    @include center;
    padding: 15px;
    overflow-x: hidden;

    .expand-housing-nav-bar {
      margin-bottom: 30rpx;
    }

    .body-main {
      .form-main {
        width: 686rpx;
        background-color: #ffffff;
        border-radius: 8rpx;
        padding: 15px;
        overflow: hidden;

        .part1,
        .part2 {
          @include borderBox;
          padding: 0;

          .title {
            text-align: center;
            font-size: 36rpx;
          }

          .row {
            width: 83vw;
            height: 52px;
            @include bottomGreyBorder;
            display: flex;
            justify-content: space-between;

            .row-name-left {
              height: 100%;
              align-items: center;
              display: flex;
              width: 190rpx;
              font-size: 28rpx;
            }

            .right-part {
              color: #bdc4ce;
              min-height: 100%;
              width: 450rpx;
              /*background-color: #D8D8D8;*/
              display: flex;
              align-items: center;

              .uni-input {
                width: 430rpx;
                height: 48rpx;
                line-height: 48rpx;
                font-size: 28rpx;
                color: #969799;
                white-space: nowrap;
              }

              .input-wrapper {
                width: 100%;

                .uni-input {
                  width: 90px;
                  @include ellipsis;
                  display: flex;
                  align-items: center;
                }
              }
            }
          }

          .double-height-row {
            height: 212rpx;
            display: flex;
            flex-direction: column;
            width: 100%;

            .input-wrapper {
              width: 120rpx !important;
              margin-left: 90rpx;
              display: flex;
              align-items: center;

              &:first-child {
                margin-left: 0rpx;
              }
            }
          }
        }

        .part2 {
          margin-top: 48rpx;

          .part2-title {
            width: 100%;
            height: 48rpx;
            font-weight: bold;
            font-size: 28rpx;
            line-height: 48rpx;
            color: #3d444c;
            margin-bottom: 24rpx;
          }

          .part2-desc {
            width: 300rpx;
            height: 48rpx;
            font-size: 24rpx;
            line-height: 48rpx;
            letter-spacing: 0rpx;
            color: #969799;
          }

          .upload-image {
            .u-upload {}

            // deprecate
            .uni-uploader__input-box {
              width: 164rpx;
              height: 164rpx;
              background-color: #f7f8fa;
              border-radius: 8rpx;
              @include contain-no-repeat-center;
              background-image: url("@/static/images/expandHousing/tuanjiazhaopian_icon@3x.png");
            }
          }
        }
      }
    }
  }
</style>

<style lang="scss">
  @import "../../assets/styles/global";

  // 内有arrow
  .shared-picker {
    position: relative;

    .triangle-down-arrow,
    .arrow-down-triangle {
      width: 20rpx;
      height: 20rpx;
      @include contain-no-repeat-center;
      background-image: url("@/static/images/arrow.png");
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: -10rpx;
    }

    .arrow-down-triangle {
      width: 12rpx;
      height: 12rpx;
      margin-top: -6rpx;
      background-image: url("@/static/images/record/triangle-arrow@3x.png");
    }
  }
</style>
